<!-- 打印收文处理单 -->
<template>
  <div class="app-container" :style="height">
    <div class="table-box-div">
    <el-button type="primary" size="medium" @click.native="doPrint">打印</el-button>
    </div>
    <section class="table-box" ref="print">
        <div class="print-title text-color">湖南南山国家公园管理局收文阅批处理单</div>
        <table class="print-table">
          <tr>
            <td class="text-center text-color" width="10%">来文单位</td>
            <td>{{form.messageUnitName}}</td>
            <td class="text-center text-color"  width="10%">收文日期</td>
            <td>{{form.messageTime}}</td>
            <td class="text-center text-color"  width="10%">秘密等级</td>
            <td>{{form.security}}</td>
          </tr>
          <tr>
            <td class="text-center text-color" width="10%">原文编号</td>
            <td>{{form.oldNumber}}</td>
            <td class="text-center text-color">收文份数</td>
            <td>{{form.messagePart}}</td>
            <td class="text-center text-color">收文序号</td>
            <td>{{form.messageNumber}}</td>
          </tr>
          <tr>
            <td class="text-center text-color" width="10%">文 件 标 题</td>
            <td colspan="5">{{form.messageTitle}}</td>
          </tr>
          <tr>
            <td class="text-center text-color" width="10%">拟 办 意 见</td>
            <td colspan="5">{{form.propose}}</td>
          </tr>
          <tr>
            <td class="text-center text-color" width="10%">领 导 批 示</td>
            <td colspan="5">
              <div v-for="item in ldpsArr" :key="item.id" style="margin: 10px 0px;">
                <span>{{item.assigneeName}}：</span><span>{{item.comment}}</span>
              </div>
            </td>
          </tr>
          <tr>
            <td class="text-center text-color" width="10%">承办情况</td>
            <td colspan="5">{{form.theOfficeIs}}</td>
          </tr>
          <tr>
            <td class="text-center text-color" width="10%">备 注</td>
            <td colspan="5">{{form.remark}}</td>
          </tr>
        </table>
    </section>
  </div>
</template>

<script>
  import { printReceiptProcessSheet } from "@/api/system/receiptProcessSheetManage";
  export default{
    data(){
      return{
        height: "max-height:"+((document.documentElement.clientHeight || document.body.clientHeight)-110)+"px;overflow-y:auto",
        id: undefined,
        form: {},
        //拟办意见 == 拟办意见
        nbyj: {},
        //领导批示 ==
        ldpsArr:[],
        //承办情况 == 综合处处长审批意见
        cbqk: {},
      }
    },
    created(){
      console.log(this.$route)
      this.id = this.$route.params.id
      this.init()
    },
    methods: {
      //获取呈批件详情数据
      init(){
        if(this.id){
          printReceiptProcessSheet({id:this.id}).then((res)=>{
            console.log(res)
            if(res.code == 200){
              this.form = res.data.bizMessageVo
              //领导批示 == 领导批示
              this.ldpsArr = []
              if(res.data.historicList && res.data.historicList.length>0){
                for(var i=0;i<res.data.historicList.length;i++){
                  if(res.data.historicList[i].activityName == '领导审批'){
                    this.ldpsArr.push(res.data.historicList[i])
                  }
                }
              }
            }
          })
        }
      },
      //打印
      doPrint: function () {
          //打印
          this.$print(this.$refs.print);
      },
    },
  }
</script>

<style scoped>
  .table-box{
    width: 650px;
    margin: 0 auto;
    margin-bottom: 20px;
    padding-top: 20px;
  }
  .table-box-div{
    width: 650px;
    margin: 0 auto;
  }
  .table-box .print-title{
    text-align: center;
    letter-spacing: 2px;
    font-size: 26px;
    /* font-weight: 700; */
    margin-bottom: 20px;
  }
  .table-box .print-table{
    width: 100%;
    border: 1px solid #f00;
    border-collapse: collapse;
    color: #000;
  }
  .table-box .print-table tr td{
    padding: 20px 10px;
    border: 1px solid #f00;
    border-collapse: collapse;
  }
  .table-box .foot-text{
    text-align: right;
  }
  .text-color{
    color: #f00;
  }
  .text-center{
    text-align: center;
  }
</style>
